<template>
    <div class="app-container">
      <el-row :gutter="24">
      <el-col :sm="8" :lg="24" style="padding-left: 20px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>联系方式</span>
          </div>
          <div>
            <ul class="list-group ">
              <li class="list-group-item">
                地址:太原市水西门街31号
              </li>
              <li class="list-group-item">
                主办单位：国家税务总局山西省税务局
              </li>
              <li class="list-group-item">
                邮 编：100038
              </li>
              <li class="list-group-item">
                邮箱:
                <el-button
            size="mini"
            type="text"
            @click="handleAdd()"
            v-hasPermi="['system:easy:query']"
          >457694051@qq.com</el-button>
                
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
      <!-- 添加或修改信息发布对话框 -->
      <el-dialog title="邮件发送" :visible.sync="open" width="700px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="发件人" prop="from">
            <el-input v-model="form.from" :min-height="192"/>
          </el-form-item>
          <el-form-item label="收件人" prop="to">
            <el-input v-model="form.to" disabled/>
          </el-form-item>
          <el-form-item label="邮件标题" prop="subject">
            <el-input v-model="form.subject" placeholder="请输入邮件标题" :min-height="192"/>
          </el-form-item>
          <el-form-item label="邮件内容">
            <el-input v-model="form.text" placeholder="请输入内容"  type="textarea"/>
          </el-form-item>
          <el-form-item label="文件上传">
            <file-upload v-model="form.filePathName"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">发 送</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import {addEmail} from "@/api/system/email";
  export default {
    name: "Email",
    data() {
      return {
              // 是否显示弹出层
        open: false,
        // 表单参数
        form:{},
        // 表单校验
        rules: {
            subject: [
            { required: true, message: "信息标题不能为空", trigger: "blur" },
            { min: 2, max: 20, message: '信息标题长度必须介于 2 和 20 之间', trigger: 'blur' }
          ],
          from:[
          { required: true, message: "发件人不能为空", trigger: "blur" },
          {pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "发件人格式错误",
            trigger: "change",
          }
          ],
          to: [
          {
            required: true,
            message: "收件人不能为空",
            trigger: "blur",
          },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "收件人格式错误",
            trigger: "change",
          },
        ],
        },
      };
    },
    created() {
    },
    methods: {
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
            from: null,
            to: null,
            text: null,
            subject: null,
            filePath:null,
            filePathName:null,
        };
        this.resetForm("form");
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.form.to="457694051@qq.com"
        this.title = "添加信息发布";
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            addEmail(this.form).then(response => {
              this.open = false;
              this.$modal.msgSuccess("发送成功");
              });
          }
        });
      },
    }
  };
  </script>
  